<template>
  <div class="rich-text" :style="customStyle" v-html="renderedContent"></div>
</template>

<script setup lang="ts">
  import { computed } from 'vue';

  const props = defineProps({
    // 富文本内容（HTML字符串）
    content: {
      type: String,
      default: '',
    },

    // 是否需要XSS过滤（默认开启）
    enableSanitize: {
      type: Boolean,
      default: true,
    },

    // 自定义类名
    customClass: {
      type: String,
      default: '',
    },

    // 自定义样式
    customStyle: {
      type: Object,
      default: () => ({}),
    },
  });

  // 处理富文本内容，可选进行XSS过滤
  const renderedContent = computed(() => {
    if (!props.content) return '';

    // 这里可以添加XSS过滤逻辑
    // 在实际项目中，建议使用成熟的XSS过滤库如DOMPurify
    if (props.enableSanitize) {
      // 简单的XSS过滤示例，实际项目中应使用更完善的过滤
      let sanitizedContent = props.content;

      // 移除危险的标签
      const dangerousTags = ['script', 'style', 'iframe', 'object', 'embed'];
      dangerousTags.forEach((tag) => {
        const regex = new RegExp(`<${tag}[^>]*>[\s\S]*?<\\/${tag}>`, 'gi');
        sanitizedContent = sanitizedContent.replace(regex, '');
      });

      // 移除危险的属性
      const dangerousAttrs = ['onerror', 'onload', 'onclick', 'onmouseover', 'href', 'src'];
      dangerousAttrs.forEach((attr) => {
        const regex = new RegExp(`\s${attr}=['"][^'"]*['"]`, 'gi');
        sanitizedContent = sanitizedContent.replace(regex, '');
      });

      return sanitizedContent;
    }

    return props.content;
  });
</script>

<style lang="scss">
  // 通用样式
  // 变量定义
  $rich-text-line-height: 1.6;
  $rich-text-color: #333;
  $rich-text-link-color: #0066cc;
  $rich-text-link-hover-color: #004a99;
  $rich-text-border-color: #e0e0e0;
  $rich-text-code-bg: #f5f5f5;
  $rich-text-blockquote-bg: #fafafa;
  $rich-text-blockquote-border: #ccc;
  $rich-text-table-stripe: #f9f9f9;

  .rich-text {
    line-height: $rich-text-line-height;
    color: $rich-text-color;
    font-size: 16px;

    // 标题
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin-top: 1.5em;
      margin-bottom: 0.5em;
      font-weight: 600;
      line-height: 1.3;
    }

    h1 {
      font-size: 2em;
    }
    h2 {
      font-size: 1.5em;
    }
    h3 {
      font-size: 1.25em;
    }
    h4 {
      font-size: 1.1em;
    }
    h5 {
      font-size: 1em;
    }
    h6 {
      font-size: 0.9em;
    }

    // 段落
    p {
      margin: 0 0 1em;
    }

    // 列表
    ul,
    ol {
      margin: 0 0 1em 1.25em;
      //   padding-left: 1em;
    }

    li {
      margin-bottom: 0.25em;
      list-style: none; // 先清空默认符号
      position: relative;
      padding-left: 1.25em;
      &::before {
        // 自定义圆点
        content: '';
        position: absolute;
        left: 0;
        top: 0.6em; // 垂直居中
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor; // 实心圆
      }
    }

    // 链接
    a {
      color: $rich-text-link-color;
      text-decoration: none;

      &:hover {
        color: $rich-text-link-hover-color;
        text-decoration: underline;
      }
    }

    // 图片
    img {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 1em 0;
    }

    // 引用
    blockquote {
      margin: 1em 0;
      padding: 0.5em 1em;
      background: $rich-text-blockquote-bg;
      border-left: 4px solid $rich-text-blockquote-border;
      font-style: italic;
      color: #555;
    }

    // 代码
    code {
      background: $rich-text-code-bg;
      padding: 0.2em 0.4em;
      border-radius: 3px;
      font-family: 'Consolas', 'Courier New', monospace;
      font-size: 0.9em;
    }

    pre {
      background: $rich-text-code-bg;
      padding: 1em;
      overflow-x: auto;
      border-radius: 4px;
      font-family: 'Consolas', 'Courier New', monospace;
      font-size: 0.9em;

      code {
        background: none;
        padding: 0;
      }
    }

    // 表格
    table {
      width: 100%;
      border-collapse: collapse;
      margin: 1em 0;

      th,
      td {
        padding: 0.15em 0.75em;
        border: 1px solid $rich-text-border-color;
        text-align: left;
      }

      th {
        background: $rich-text-table-stripe;
        font-weight: 600;
      }

      tbody tr:nth-child(even) {
        background: $rich-text-table-stripe;
      }
    }

    // 水平线
    hr {
      border: none;
      border-top: 1px solid $rich-text-border-color;
      margin: 2em 0;
    }

    // 强调
    strong {
      font-weight: 600;
    }

    em {
      font-style: italic;
    }

    // 删除线
    del {
      text-decoration: line-through;
      color: #888;
    }

    // 下划线
    u {
      text-decoration: underline;
    }

    // 上标/下标
    sup,
    sub {
      font-size: 0.8em;
    }
  }
</style>

<style lang="scss">
  // 定制主题样式
  .rich-text.block-theme {
    section {
      background: #ededed;
      padding: 24px;
      margin-bottom: 40px;
      border-radius: 8px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
</style>
